Page({
  data: {
    billId: '',
    billInfo: null,
    // 支付方式
    paymentMethods: [
      { id: 'wxpay', name: '微信支付', icon: '/assets/icons/wxpay.png' },
      { id: 'alipay', name: '支付宝', icon: '/assets/icons/alipay.png' },
      { id: 'bank', name: '银行卡', icon: '/assets/icons/bank.png' }
    ],
    selectedMethod: 'wxpay'
  },

  onLoad(options) {
    const { id } = options
    this.setData({ billId: id })
    this.getBillDetail()
  },

  // 获取账单详情
  getBillDetail() {
    // 模拟接口调用
    this.setData({
      billInfo: {
        id: this.data.billId,
        month: '2024-03',
        items: [
          { name: '房租', amount: 2800 },
          { name: '水费', amount: 85 },
          { name: '电费', amount: 156 }
        ],
        total: 3041,
        dueDate: '2024-03-05'
      }
    })
  },

  // 选择支付方式
  onSelectMethod(e) {
    const { method } = e.currentTarget.dataset
    this.setData({ selectedMethod: method })
  },

  // 确认支付
  onConfirmPayment() {
    // 显示支付确认弹窗
    wx.showModal({
      title: '确认支付',
      content: `是否确认支付 ¥${this.data.billInfo.total}？`,
      success: (res) => {
        if (res.confirm) {
          this.processPayment()
        }
      }
    })
  },

  // 处理支付流程
  processPayment() {
    wx.showLoading({
      title: '支付处理中'
    })

    // 模拟支付过程
    setTimeout(() => {
      wx.hideLoading()
      
      // 随机模拟支付成功或失败
      const isSuccess = Math.random() > 0.2
      
      if (isSuccess) {
        wx.showToast({
          title: '支付成功',
          icon: 'success',
          duration: 2000,
          success: () => {
            setTimeout(() => {
              // 支付成功后返回上一页
              wx.navigateBack()
            }, 2000)
          }
        })
      } else {
        wx.showToast({
          title: '支付失败，请重试',
          icon: 'error',
          duration: 2000
        })
      }
    }, 1500)
  }
}) 